<template>
  <div class="w100 h100 main df aic jcc">
    <el-form class="form" :model="loginForm">
      <el-form-item>
        <div class="df aic jcc w100">
          <img
            style="width: 50px"
            src="@/assets/imgs/logoAvatat  (4).png"
            alt=""
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="loginForm.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="loginForm.passwd"
          placeholder="请输入密码"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="w100" @click="userLogin"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { login } from "@/apis/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const loginForm = ref({
  username: "",
  passwd: "",
});

const router = useRouter();

const userLogin = async () => {
  try {
    let login_res = await login(loginForm.value);
    if (login_res.data.code === 200 && login_res.data.data.token) {
      localStorage.setItem("token", JSON.stringify(login_res.data.data.token));
      router.push("/detail");
    } else {
      ElMessage.error(login_res.data.message);
    }
  } catch (e) {
    console.log(e);
  }
};
</script>

<style lang="scss" scoped>
.main {
  background: url(/src/assets/imgs/1747720776095.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.el-form {
  width: 200px;
  background-color: #fff;
  border-radius: 16px;
  padding: 60px;
}
</style>
